<template>
    <div class="task">
      <div class="main-left">
        <div class="navbar">
          <div class="search">
            <input placeholder="搜索任务名称" :class="['search-box']"
                   v-model="searchTaskName" @input="searchTask"
            />
            <i v-show="is_show_close_search_icon" class="close_icon" @click="close_search"></i>
          </div>
          <div :class="['title',active==1?'active':'']" @click="openSeeBoard">
            任务
          </div>
          <div :class="['my_delay_apply',active==2?'active':'']" @click="openDelayApplyList">
            我的延期申请<i v-if="unCompleteDelayNum!=0" style="font-weight: normal">{{this.$store.state.unCompleteDelayNum}}</i>
          </div>
          <div class="add-task" @click="data_addTask.is_show=true">
            <i></i>
            新建任务
          </div>
        </div>
      </div>
      <div class="main-right">
        <router-view/>
      </div>
      <transition name="fade">
        <addTask :data="data_addTask" v-if="data_addTask.is_show" @update="update_task_list"></addTask>
      </transition>
    </div>
</template>

<script>
  import addTask from '@/components/addTask'

  export default {
    components: {addTask},
    data() {
      return {
        is_show_close_search_icon: false,
        unCompleteDelayNum: '',//
        searchTaskName: '',//搜索的任务名称
        data_addTask: {
          is_show: false
        },
        active: '1',//1为任务 2我的延期申请
        searchTime: '',
      }
    },
    created() {
      let arr = this.$route.name;
      if (arr == 'DelayApplyList') {
        this.active = 2;
      } else if (arr == 'SeeBoard') {
        this.active == 1;
      }
      this.getUnCompleteDelayNum();
    },
    methods: {
      //关闭搜索
      close_search() {
        this.is_show_close_search_icon = false;
        this.searchTaskName = '';
        this.active = 1;
        this.$router.push({
          path: '/task/seeBoard'
        });
      },
      //请求待审批的数量
      getUnCompleteDelayNum() {
        this.$http.get('task/task/query/unCompleteDelayNum', {
          params: {
            userId: this.$store.state.userInfo.userId,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.unCompleteDelayNum = res.data;
            this.$store.commit('SET_USERINFO_UNCCOMPLETEDELAYNUM', res.data);
          } else {
            // this.$message.error(res.statu)
          }
        })
      },
      //搜素任务
      searchTask() {
        this.is_show_close_search_icon = true;
        this.active = '';
        clearInterval(this.searchTime);
        this.searchTime = setTimeout(() => {
          this.$router.push({
            path: '/task/taskSearch',
            query: {taskName: this.searchTaskName}
          });
        }, 1000);
      },
      //打开我的延期申请列表
      openDelayApplyList() {
        this.active = 2;
        this.$router.push({
          path: '/task/delayApplyList'
        });
      },
      //打开任务看板
      openSeeBoard() {
        this.active = 1;
        this.$router.push({
          path: '/task/seeBoard'
        });
      },
      //更新任务列表
      update_task_list() {
        console.log('创建成功了');
        this.$store.commit('SET_HAVNEWTASK', new Date());
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
 .task {
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;

      > .main-left {
        width: 304px;
        height: 100%;
        padding: 24px;

        > .navbar {
          width: 100%;
          height: 100%;
          background-color: #ffffff;
          border-radius: 6px;
          padding: 22px 24px 24px 24px;
          position: relative;

          > .search {
            .close_icon {
              position: absolute;
              right: 38px;
              top: 36px;
              background-image: url("../../assets/img/close.png");
              width: 11px;
              height: 11px;
              background-repeat: no-repeat;
              background-size: cover;
              cursor: pointer;
            }

            input {
              width: 208px;
              height: 40px;
              line-height: 40px;
              background-color: #F2F6F9;
              border-radius: 6px;
              border: 1px solid #F2F6F9;
              box-sizing: border-box;
              text-indent: 11px;
              font-size: 14px;
            }

            input:focus {
              border-color: #0A52E4;
            }
          }

          > .title {
            font-size: 16px;
            color: #96A2AA;
            /*line-height: 80px;*/
            /*border-bottom: 1px solid #EEEEEE;*/
            margin-top: 32px;
            cursor: pointer;
          }

          .my_delay_apply {
            line-height: 80px;
            font-size: 16px;
            color: #96A2AA;
            cursor: pointer;

            i {
              float: right;
              color: #FF8F2B;
            }
          }

          > .active {
            color: #454A55;
            font-weight: 600;
          }

          .add-task {
            position: absolute;
            width: 122px;
            height: 40px;
            line-height: 40px;
            background-color: #FF8F2B;
            font-size: 14px;
            color: #ffffff;
            border-radius: 6px;
            text-indent: 47px;
            bottom: 24px;
            left: 67px;
            cursor: pointer;

            i {
              position: absolute;
              background-image: url("../../assets/img/task/ic_add-job.png");
              width: 14px;
              height: 14px;
              left: 25px;
              top: 13px;
            }
          }


        }
      }

      > .main-right {
        width: calc(100% - 304px);
        height: 100%;
        position: relative;
      }
    }
</style>
